/*
 * @Description: 全宗操作组件
 * @Author: Rfan
 * @Date: 2022-01-07 15:35:59
 * @LastEditTime: 2022-05-26 17:03:59
 */
import { Button, Modal, Space } from 'antd';
import { useMemo, useState } from 'react';
import { IUnit } from '@/interfaces/unit';
import { useUnitContext } from '../contexts/UnitContext';
import AddUnitDialog from './dialogs/AddUnitDialog';

export type IAddSubData = { pid: number };

const Operate = () => {
  const { selectItems, onDeleteUnit, switchTableType } = useUnitContext();

  // 弹窗展示状态
  const [unitDialogVisible, setUnitDialogVisible] = useState(false);

  /**
   * @description: 打开新建单位弹窗
   */
  const showModal = () => {
    setUnitDialogVisible(true);
  };

  /**
   * @description: 删除单位
   */
  const delItem = () => {
    Modal.confirm({
      title: '删除',
      content: '确认删除选中的单位？',
      onOk() {
        onDeleteUnit(selectItems);
      },
      onCancel() {
        console.log('del unit Cancel');
      }
    });
  };

  return (
    <>
      <div className="filter-container">
        <p className="page-title">单位列表</p>
        <Space size="small">
          <Button
            onClick={() => {
              switchTableType();
            }}
          >
            切换展示状态
          </Button>
          <Button
            onClick={() => {
              showModal();
            }}
          >
            新建单位
          </Button>
          <Button
            disabled={selectItems.length <= 0}
            onClick={() => {
              delItem();
            }}
          >
            删除单位
          </Button>
        </Space>
      </div>
      {useMemo(
        () => (
          <AddUnitDialog
            visible={unitDialogVisible}
            onClose={() => {
              setUnitDialogVisible(false);
            }}
          />
        ),
        [unitDialogVisible]
      )}
    </>
  );
};

export default Operate;
